<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-10-19 20:57:06
 * @LastEditors: charles
 * @LastEditTime: 2021-10-19 21:26:35
-->
<template>
  <div class="Echarts">
    <div id="main" style="height: 190px"></div>
  </div>
</template>

<script>
import { get } from "@/utils/request";
import {mapActions, mapState} from "vuex"
export default {
  name: "Echarts",

  data() {
    return {
      sales: [],
      days: [],
      nums: [],
      totals: [],
      serise_days: [],
      series_nums: [],
    };
  },

  created() {
    // this.getSerise();
  },

  computed:{
    // ...mapState('home',["serise1"]),
  },

  methods: {
    async loadSales() {
      let url = "/statistics/dayOrder";
      let response = await get(url);
      this.sales = response.data.map((item) => {
        item.total = +parseInt(item.total);
        return item;
      });
      for (let i = 0; i < this.sales.length; i++) {
        this.days.push(this.sales[i].day);
        this.nums.push(this.sales[i].num);
        this.totals.push(this.sales[i].total);
      }
      // for (let i = 0; i < this.nums.length; i++) {
      //   this.series_nums.push({
      //     name: "num",
      //     type: "line",
      //     stack: "Total",
      //     data: this.nums[i],
      //   });
      },
    //   console.log(this.series_nums);
    //   console.log(this.sales);
    //   console.log(this.days);
    //   console.log(this.nums);
    //   console.log(this.totals.toString());
    // },

    // getData() {
    //   var jsonstr = [];
    //   for (var i = 0; i < this.nums.length; i++) {
    //     var json = {};
    //     json.name = this.nums[i];
    //     json.value = "value";
    //     jsonstr.push(json);
    //   }
    //   return jsonstr;
    // },

    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "订单趋势数据",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["num", "total"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // data: this.days,
          data: ["2021-12-02", "2021-12-03", "2021-12-09", "2021-12-31", "2022-01-01"],
        },
        yAxis: {
          type: "value",
        },
        // series: this.series1,
        series: [
          {
            name: "num",
            type: "line",
            stack: "Total",
            // data: [this.nums.toString()],
            data: [1, 7, 2, 6, 23],
          },
          {
            name: "total",
            type: "line",
            stack: "Total",
            // data: this.totals,
            data: [27, 2606, 174, 1249, 199],
          },
        ],
      };
      // this.series_nums = [];
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    this.myEcharts();
    this.loadSales();
  },
};
</script>

<style>
</style>

<!--
<template>
  <div ref="root"></div>
</template>
<script>
import { Line } from '@antv/g2plot';
import {get} from '@/utils/request'
export default {
  data(){
    return {
      plot:null,
      sales: [],
    }
  },
  async mounted(){
    await this.loadSales();
    await this.initChart();
  },
  beforeDestroy(){
    if(this.plot){
      this.plot.destroy();
    }
  },
  methods:{
    // 加载排名数据
    async loadSales() {
      console.log(this.sales);
      let url = "/statistics/dayOrder";
      let response = await get(url);
      this.sales = response.data.map(item => {
        item.total = + parseInt(item.total)
        return item;
      });
      console.log(this.sales);
    },
    initChart(){
      let container = this.$refs.root ;
      container.style.height = '190px'
      this.plot = new Line(container, {
        data:this.sales,
        xField: 'day',
        yField: 'total',
        smooth: true,
        isStack:true,
        tooltip: {
          formatter: (datum) => {
            return { name: datum.day + "销售额：", value: datum.total + '元' };
          },
        }
      });
      console.log(this.plot);
      this.plot.render();
    }
  }
}
</script>

-->